<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <link href="/css/img/favicon.ico" mce_href="/css/img/favicon.ico" rel="icon" type="image/x-icon">
  <title>闲钱+|官方网站</title>
  <meta name="keywords" content="这里是关键词内容" />
  <meta name="description" content="这里是描述内容" />
  <link rel="stylesheet" type="text/css" media="all" href="/css/reset.css">
  <link rel="stylesheet" type="text/css" media="all" href="/css/border.css">
  <link rel="stylesheet" type="text/css" media="all" href="/js/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" media="all" href="/css/main.css">
</head>

<body class="layui-layout-body">
  <div id="app">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">
          <img :src="indexImg" />
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item" v-for="(menu,index) in menulist" :key="index">
            <a :href="menu.link">{{menu.name}}</a>
          </li>
        </ul>
      </div>
      <!-- 内容主体区域 -->
      <div class="layui-body">
        <!-- 轮播 -->
        <div class="layui-carousel" id="test1">
          <div carousel-item>
            <script id="charts" type="text/html"></script>
          </div>
        </div>
        <!-- 平台能力 -->
        <div class="layui-row">
          <div class="layui-col-xs12 power-box" :style="powerbg">
            <div class="layui-demo">
              <fieldset class="layui-elem-field layui-field-title power-title">
                <legend>{{power.title}}</legend>
              </fieldset>
              <div class="power">
                <ul>
                  <li v-for="(power,index) in powerlist" :key="index">
                    <img class="icon" :src="power.img" />
                    <p class="title">{{power.text}}</p>
                    <p class="info" v-html="power.info"></p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 低成本 / 高收入 / 3步轻松搞定 -->
        <div class="layui-row">
          <div class="layui-col-xs12">
            <div class="layui-demo">
              <fieldset class="layui-elem-field layui-field-title">
                <legend>{{steps.title}}</legend>
              </fieldset>
              <div class="steps">
                <ul>
                  <li v-for="(steps, index) in stepslist" :key="index">
                    <i v-if="index !== stepslist.length - 1"></i>
                    <span :style="steps.img"></span>
                    <h3>{{steps.title}}</h3>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 模版特色 -->
        <div class="layui-row">
          <div class="layui-col-xs12">
            <div class="layui-demo">
              <fieldset class="layui-elem-field layui-field-title">
                <legend>{{features.title}}</legend>
              </fieldset>
              <div class="features">
                <ul>
                  <li v-for="(features,index) in featureslist" :key="index">
                    <span :style="features.img"></span>
                    <h3>{{features.title}}</h3>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 谁在用闲钱+ -->
        <div class="layui-row">
          <div class="layui-col-xs12">
            <div class="layui-demo">
              <fieldset class="layui-elem-field layui-field-title">
                <legend>{{link.title}}</legend>
              </fieldset>
              <div>
                <div class="layui-carousel" id="test2" lay-filter="test2">
                  <div carousel-item="">
                    <div class="link-list" v-for="(page,index) in linkpage" :key="index">
                      <div class="link-item" v-for="lis in linklist.slice(0,15)" v-if="page === 0">
                        <a :href="lis.link" target="_blank"><img :src="lis.img" /></a>
                      </div>
                      <div class="link-item" v-for="lis in linklist.slice(16,30)" v-if="page === 1">
                        <a :href="lis.link" target="_blank"><img :src="lis.img" /></a>
                      </div>
                      <div class="link-item" v-for="lis in linklist.slice(30,45)" v-if="page === 2">
                        <a :href="lis.link" target="_blank"><img :src="lis.img" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部区域 -->
        <div class="layui-row layout-footer-bg">
          <div class="layui-col-xs12">
            <div class="layout-footer">
              <div class="footer-list border-bottom">
                <div class="ft-item">
                  <div class="ft-title">{{map}}</div>
                  <ul>
                    <li v-for="(menu,index) in menulist" :key="index">
                      <a :href="menu.link">{{menu.name}}</a>
                    </li>
                  </ul>
                </div>
                <div class="ft-item">
                  <div class="ft-title">{{server}}</div>
                  <ul>
                    <li>
                      <span v-html="contact"></span>
                    </li>
                  </ul>
                </div>
                <div class="ft-weixin">
                  <img :src="ma" />
                  <p>{{weixin}}</p>
                </div>
              </div>
              <div class="ft-link">
                <p>{{flinkTitle}}
                  <template v-for="(tlink, index) in flink">
                    <span v-if="index < flink.length - 1"><a :href="tlink.link" target="_blank">{{tlink.title}}</a>&nbsp;|&nbsp;</span>
                    <span v-else><a :href="tlink.link" target="_blank">{{tlink.title}}</a></span>
                  </template>
                </p>
                <p v-html="copyright"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="/js/jquery/jquery-1.12.2.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="/js/vue/axios.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="/js/vue/vue.js" charset="utf-8"></script>
  <script type="text/javascript" src="/js/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript">
    var vm = new Vue({
      name: "Index",
      el: "#app",
      data() {
        return {
          indexImg: "",
          powerbg: "",
          menulist: {},
          power: {},
          powerlist: [],
          steps: {},
          stepslist: [],
          features: {},
          featureslist: [],
          link: {},
          linkpage: {},
          linklist: {},
          map: "",
          server: "",
          contact: "",
          ma: "",
          weixin: "",
          flinkTitle: "",
          flink: [],
          copyright: "",
        }
      },
      methods: {
        getDate() {
          axios.get('/js/static/index.json')
            .then(this.dataList)
        },
        dataList(res) {
          res = res.data
          if (res.data) {
            const data = res.data
            this.indexImg = data.indexImg
            this.powerbg = data.powerbg
            this.menulist = data.menulist
            this.power = data.power
            this.powerlist = data.powerlist
            this.steps = data.steps
            this.stepslist = data.stepslist
            this.features = data.features
            this.featureslist = data.featureslist
            this.link = data.link
            this.linkpage = data.linkpage
            this.linklist = data.linklist
            this.map = data.map
            this.server = data.server
            this.contact = data.contact
            this.ma = data.ma
            this.weixin = data.weixin
            this.flinkTitle = data.flinkTitle
            this.flink = data.flink
            this.copyright = data.copyright
          }
        },
      },
      mounted() {
        this.getDate()
      }
    })
  </script>

  <script type="text/javascript">
    layui.use(['carousel', 'laytpl'], function () {
      var carousel = layui.carousel;
      var laytpl = layui.laytpl;
      //建造实例
      var ins = carousel.render({
        elem: '#test1',
        width: '100%', //设置容器宽度
        height: '415px',
        arrow: 'none', //始终显示箭头
        autoplay: 'true',
        interval: '5000'
      });

      $.get("/js/static/banner.json", function (data) {
        // data = JSON.parse(data);
        var tpl = $("#charts").html();
        laytpl(tpl).render(data, function (html) {
          for (var i in data.bannerlist) {
            html += `<div style="` + data.bannerlist[i].img + `"></div>`
          }
          $("#test1").children('div').html(html);
          ins.reload({
            elem: '#test1'
          });
        });
      });

      var inslink = carousel.render({
        elem: '#test2',
        arrow: 'always',
        width: '1196px',
        height: '420px',
        autoplay: false,
        arrow: 'none',
        indicator: 'outside'
      });

      inslink.reload({
        elem: '#test2'
      });
    });
  </script>
</body>

</html>